<template>
  <div class="mapan">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">码盘管理</span>
      </div>
      <s-table
        :table="table"
        ref="table"
        @http="tableWatch">
        <el-form-item label="名称" prop="gysmc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_gysmc"
                    placeholder="供应商名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="ASN编号" prop="asnbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_asnbh"
                    placeholder="ASN编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="PO编号" prop="dycgdbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_dycgdbh"
                    placeholder="关联PO编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="cjsj">
          <el-date-picker
            v-model="autoVue_table_cjsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="打印时间" prop="dysj">
          <el-date-picker
            v-model="autoVue_table_dysj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="码盘状态" prop="mpzt">
          <el-select v-model="autoVue_table_mpzt"
                     placeholder="是否码盘">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              label="未码盘"
              value="0"></el-option>
            <el-option
              label="已码盘"
              value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="打印状态" prop="dyzt">
          <el-select v-model="autoVue_table_dyzt"
                     placeholder="打印状态">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              label="未打印"
              value="0"></el-option>
            <el-option
              label="打印"
              value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="info" @click="tableEncoder('')" v-if="USER.auth.indexOf('inOperation_mapan_mapan')!==-1
">多选码盘</el-button>
            </el-col>
            <el-col :span="8">
              <el-button size="small" type="info" @click="tableEncoderCancel('')" v-if="USER.auth.indexOf('inOperation_mapan_cancel')!==-1
">取消码盘</el-button>
            </el-col>
            <el-col :span="8">
              <el-button size="small" type="info" @click="tablePrint('')" v-if="USER.auth.indexOf('inOperation_mapan_print')!==-1
">打印</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template scope="s">
            <el-button type="info" size="mini" @click="dialogSearchOpen(s.row)" icon="search"></el-button>
            <el-button type="success" size="mini" @click="tableEncoder(s.row) " v-if="USER.auth.indexOf('inOperation_mapan_mapan')!==-1 &&s.row.asnzt === '0' && s.row.shzt === '1' && s.row.mpzt ==='0'">码盘</el-button>
            <el-button type="warning" size="mini" v-if="USER.auth.indexOf('inOperation_mapan_detailed')!==-1 && s.row.mpzt ==='1'" @click="dialogOpen(s.row)">明细</el-button>
            <el-tooltip placement="top">
            <div slot="content">更多可用操作</div>
            <el-popover
              popper-class="demo-table-expand"
              placement="right"
              title="更多可用操作"
              trigger="click">
              <slot name="content">
                <el-button type="info" size="mini" @click="tablePrint(s.row)" v-if="USER.auth.indexOf('inOperation_mapan_print')!==-1"><i class="fa fa-print" aria-hidden="true"></i> 打印</el-button>
                <el-button type="danger" size="mini" @click="tableEncoderCancel(s.row) " v-if="USER.auth.indexOf('inOperation_mapan_cancel')!==-1 && s.row.asnzt === '0' && s.row.mpzt ==='1'">取消码盘</el-button>
              </slot>
              <el-button slot="reference" type="info" icon="more" :plain="true" size="mini" class="__reference"></el-button>
            </el-popover>
          </el-tooltip>
          </template>
        </el-table-column>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <s-table
        :table="tableDetailed"
        ref="tableDetailed"
        @http="tableWatch">
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="tableDetailed.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="info" @click="tableDetailedPrint('')">打印</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="80">
          <template scope="s">
            <el-button type="info" size="mini" @click="tableDetailedPrint(s.row)"><i class="fa fa-print" aria-hidden="true"></i></el-button>
          </template>
        </el-table-column>
      </s-table>
    </s-dialog>
    <s-dialog :dialog="dialogSearch" :close="dialogSearchInit" :closeTip="false">
      <p slot="title">查看明细<span>{{dialogSearch.row.bh}}</span></p>
      <s-table :table="tableSearch" ref='tableSearch' :pagination="false" :control="true"></s-table>
      <el-button slot="footer" @click="dialogSearchSave">好</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogPrint" :closeTip="false">
      <el-card class="print_card mapanPrint">
        <el-form class="s-form">
          <el-row>
            <p class="title">{{dialogPrint.data.time}}<span>{{ dialogPrint.data.index+'/'+dialogPrint.data.totals }}</span></p>
          </el-row>
          <el-row class="asnbh">{{dialogPrint.data.asnbh}}</el-row>
          <el-row>
            <el-form-item prop="bh" label="货品编号">
              <div class="s-content">{{dialogPrint.data.bh}}</div>
            </el-form-item>
            <el-form-item prop="mc" label="货品名称">
              <div class="s-content">{{dialogPrint.data.mc}}</div>
            </el-form-item>
            <el-form-item prop="gysmc" label="供应商">
              <div class="s-content">{{dialogPrint.data.gysmc}}</div>
            </el-form-item>
          </el-row>
          <div class="clearfix">
            <div class="mapanbh">
              <el-form-item prop="scrq" label="生产日期">
                <div class="s-content">{{dialogPrint.data.scrq}}</div>
              </el-form-item>
              <el-form-item prop="hppc" label="货品批号">
                <div class="s-content">{{dialogPrint.data.hppc}}</div>
              </el-form-item>
            </div>
            <div class="mapanbh">
              {{dialogPrint.data.lpn}}
            </div>
          </div>
        </el-form>
      </el-card>
    </s-dialog>
  </div>
</template>
<script>
  import {AutoVue, GetLodop, FormatterTime} from '~/plugins/Tools';
  import Mapan from '~/components/zxwmsPrint/mapan.vue';
  import Vue from 'vue';
  function __tableMx () {
    return {
      column: [
        { label: '货品编号',
          prop: 'hpbh',
          minWidth: '0px',
          cRemarks: '根据货品接口获取',
          search: false },
        { label: '货品名称',
          prop: 'hpmc',
          minWidth: '0px',
          cRemarks: '根据货品接口获取',
          search: false },
        { label: '预期数量',
          prop: 'yqsl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '货品批次',
          prop: 'hppc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '生产日期',
          prop: 'scrq',
          formatter: (row, column) => {
            return FormatterTime(row[column.property || column], 3);
          },
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '备注',
          prop: 'bz',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '包装名称',
          prop: 'mc',
          minWidth: '0px',
          cRemarks: '根据货品接口获取',
          search: false },
        { label: '主单位',
          prop: 'ms',
          minWidth: '0px',
          cRemarks: '通过packDetailList接口获得',
          search: false },
        { label: '明细状态',
          prop: 'show_zt',
          minWidth: '0px',
          cRemarks: '不可编辑',
          search: false },
        { label: '质检单状态',
          prop: 'show_zjzt',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '预期箱数量',
          prop: 'yqxsl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '体积',
          prop: 'tj',
          minWidth: '0px',
          cRemarks: '不可编辑，计算获取',
          search: false },
        { label: '净重',
          prop: 'jz',
          minWidth: '0px',
          cRemarks: '不可编辑，计算获取',
          search: false },
        { label: '毛重',
          prop: 'zl',
          minWidth: '0px',
          cRemarks: '不可编辑，计算获取',
          search: false },
        { label: '金额(元)',
          prop: 'je',
          minWidth: '0px',
          cRemarks: '不可编辑，计算获取',
          search: false },
        { label: '失效日期',
          prop: 'sxrq',
          minWidth: '0px',
          cRemarks: '',
          formatter: (row, column) => {
            return FormatterTime(row[column.property || column], 3);
          },
          search: false },
        { label: '破损数量',
          prop: 'pssl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '拒收数量',
          prop: 'jssl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '拒收原因',
          prop: 'jsyy',
          minWidth: '0px',
          cRemarks: '',
          search: false } ],
      key: 'hpbh',
      tableColumn: 6,
    };
  }
  export default AutoVue({
    name: 'inOperation_mapan-FEcarWms',
    store: ['USER'],
    data: {
      table: {
        column: [ { label: '仓库',
          prop: 'ckmc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '货主',
          prop: 'hzmc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: 'ASN编号',
          prop: 'asnbh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: 'ASN类型',
          prop: 'asnlx',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: 'ASN状态',
          prop: 'show_asnzt',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '优先级',
          prop: 'yxj',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '预计到货时间',
          prop: 'yjdhsjq',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '创建时间',
          prop: 'cjsj',
          minWidth: '0px',
          type: 'DateRange',
          cRemarks: '',
          search: true },
        { label: '审核状态',
          prop: 'show_shzt',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '关联PO编号',
          prop: 'dycgdbh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '制单人',
          prop: 'zdr',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '审核人',
          prop: 'ddshr',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '打印状态',
          prop: 'show_dyzt',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '打印时间',
          prop: 'dysj',
          minWidth: '0px',
          cRemarks: '',
          type: 'DateRange',
          search: true },
        { label: '收货完成时间',
          prop: 'shwcsjTime',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '供应商名称',
          prop: 'gysmc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '码盘状态',
          prop: 'show_mpzt',
          minWidth: '0px',
          cRemarks: '0.未码盘 1.码盘',
          search: true } ],
        url: '/wmspalletsorting/list',
        key: 'id',
        tableColumn: 3,
      },
      dialog: {
        title: '新增',
        row: {},
        size: 'large',
      },

      tableDetailed: {
        column: [
          { label: 'ASN行号',
            prop: 'bh',
            cRemarks: '',
            minWidth: '120px',
            search: false },
          { label: '托盘码',
            prop: 'lpn',
            minWidth: '120px',
            cRemarks: '',
            search: false },
          { label: '货品编号',
            prop: 'bh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '货品名称',
            prop: 'mc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '批次',
            prop: 'hppc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '生产日期',
            prop: 'scrq',
            minWidth: '0px',
            cRemarks: '',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 3);
            },
            search: false },
          { label: '供应商',
            prop: 'gys',
            minWidth: '0px',
            cRemarks: '',
            search: false },
        ],
        url: '/wmspalletsorting/baseSelectMx',
        key: 'id',
        tableColumn: 4,
      },

      dialogSearch: {
        size: 'large',
        row: {},
      },
      tableSearch: {
        ...__tableMx(),
        muti: false,
      },

      dialogPrint: {
        data: {},
      },
    },
    transition: 'slide-fade',
    methods: {
      dialogInit () {
      },
      async dialogOpen (row) {
        this.tableDetailed.url = '/wmspalletsorting/baseSelectMx/' + row.id;
        this.tableWatch('tableDetailed');
        this.dialog.visible = true;
      },
      tableEncoder (row) {
        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this.table.multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this.table.multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将码盘选择的码盘信息', '确认码盘？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/wmspalletsorting/add/', {
                ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          });
      },
      tableEncoderCancel (row) {
        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this.table.multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this.table.multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将选择的码盘信息进行取消码盘的操作', '确认取消码盘？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/wmspalletsorting/delete', {
                ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tablePrint (row) {
        let tableRef = 'table';

        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this[tableRef].multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将打印码盘信息。', '确认打印？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          let LODOP = GetLodop();
          LODOP.PRINT_INIT('打印码盘信息');
          let {contentList, totals} = await this.post('/wmspalletsorting/dySelecttp', {ids});
          // this.dialogPrint.visible = true;
          let time = this.formatterTime(new Date(), 6);
          let index = 1;
          for (let item of contentList) {
            let print = new Vue({
              el: document.createElement('div'),
              render (h) {
                return h(
                  'print', {
                    props: {
                      dialogPrint: this.dialogPrint,
                    },
                  }
                );
              },
              data: {
                dialogPrint: {
                  data: {
                    ...item,
                    scrq: FormatterTime(new Date(item.scrq)),
                    time,
                    index,
                    totals,
                  },
                },
              },
              components: {
                'print': Mapan,
              },
            });
            index++;
            let HTML = `<html>
${header()}
<body>
${print.$el.innerHTML}
</body>
</html>`;
            LODOP.NewPage();
            LODOP.ADD_PRINT_HTM(0, 0, '100mm', '80mm', HTML);
            LODOP.ADD_PRINT_BARCODE('11.38mm', '5.82mm', '52.92mm', '11.91mm', '128A', item.asnbh);
            LODOP.ADD_PRINT_BARCODE('52.12mm', '47.36mm', '45mm', '11.91mm', '128A', item.lpn);
          }
          LODOP.PREVIEW();
          // LODOP.PRINT_DESIGN();
        });
      },
      tableDetailedPrint (row) {
        let tableRef = 'tableDetailed';

        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this[tableRef].multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将打印码盘信息。', '确认打印？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          let LODOP = GetLodop();
          LODOP.PRINT_INIT('打印码盘信息');
          let {contentList, totals} = await this.post('/wmspalletsorting/baseDyid', {ids});
          // this.dialogPrint.visible = true;
          let time = this.formatterTime(new Date(), 6);
          let index = 1;
          for (let item of contentList) {
            let print = new Vue({
              el: document.createElement('div'),
              render (h) {
                return h(
                  'print', {
                    props: {
                      dialogPrint: this.dialogPrint,
                    },
                  }
                );
              },
              data: {
                dialogPrint: {
                  data: {
                    ...item,
                    scrq: FormatterTime(new Date(item.scrq)),
                    time,
                    index,
                    totals,
                  },
                },
              },
              components: {
                'print': Mapan,
              },
            });
            index++;
            let HTML = `<html>
${header()}
<body>
${print.$el.innerHTML}
</body>
</html>`;
            LODOP.NewPage();
            LODOP.ADD_PRINT_HTM(0, 0, '100mm', '80mm', HTML);
            LODOP.ADD_PRINT_BARCODE('11.38mm', '5.82mm', '52.92mm', '11.91mm', '128A', item.asnbh);
            LODOP.ADD_PRINT_BARCODE('52.12mm', '47.36mm', '45mm', '11.91mm', '128A', item.lpn);
          }
          LODOP.PREVIEW();
          // LODOP.PRINT_DESIGN();
        });
      },

      dialogSearchInit () {
        this.dialogSearch.row = {};
      },
      async dialogSearchOpen (row) {
        this.dialogSearch.row = row;
        this.tableSearch.data = await this.post('/wmsEstimatedArrivalOrderDetailed/list/' + row.id);
        this.dialogSearch.visible = true;
      },
      dialogSearchSave () {
        this.dialogSearchInit();
        this.dialogSearch.visible = false;
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
  function header () {
    return `
<head>
<style>
/* reset */
html {
  overflow: hidden;
}

body, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, textarea, blockquote, th, td, input, select, textarea, button {
  margin: 0;
  padding: 0
}

/* 重置fieldset（表单分组）、图片的边框为0*/
dl, ul, ol, menu, li {
  list-style: none
}

/* 重置类表前导符号为onne,menu在HTML5中有效 */
blockquote, q {
  quotes: none
}

/* 重置嵌套引用的引号类型 */
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}

/* 重置嵌套引用*/
input, select, textarea, button {
  vertical-align: middle
}

/* 重置表单控件垂直居中*/
button {
  border: 0 none;
  background-color: transparent;
  cursor: pointer
}

/* 重置表单button按钮效果 */
body {
  background: #fff
}

/* 重置body 页面背景为白色 */
body, th, td, input, select, textarea, button {
}

/*清除浮动--推荐使用*/
.clearfix:before, .clearfix:after {
  content: '';
  display: table;
}
.el-form-item:before, .el-form-item:after {
  content: '';
  display: table;
}

.el-form-item:after {
  clear: both;
}
.clearfix:after {
  clear: both;
}

.el-card {
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}

.el-card__header {
    padding: 18px 20px;
    border-bottom: 1px solid #d1dbe5;
    box-sizing: border-box;
}

.el-card__body {
    padding: 20px;
}

.el-row {
    position: relative;
    box-sizing: border-box;
}

.el-progress-bar__inner:after, .el-row:after, .el-row:before, .el-slider:after, .el-slider:before, .el-slider__button-wrapper:after, .el-upload-cover:after {
    content: "";
}

.el-row:after, .el-row:before {
    display: table;
}

  .mapanPrint .el-card__body{
    padding: 0 20px 20px;
  }
  .mapanPrint .title span{
    float: right;
  }
  .mapanbh{
    float: left;
    width: 50%;
  }
  .asnbh{
    height: 45px;
  }
  .mapanPrint .el-form-item{
    margin-bottom: 10px;
  }
.el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #48576a;
    line-height: 1;
    padding: 11px 12px 11px 0;
    box-sizing: border-box;
}


.el-form-item__content {
    line-height: 36px;
    position: relative;
    font-size: 14px;
    float: left;
}
.s-content{
  display:inline-block;
}
.title{
    float: left;
    width: 50%;
  }
.title .right{
    float: right;
  }
html{width:378px;height:302px;overflow:hidden;}
</style>
</head>
    `;
  }
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>
